<template>
  <svg
    class="cursor-pointer"
    @click.stop="closeBtn"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
    xmlns="http://www.w3.org/2000/svg"
    :width="size"
    :height="size"
    viewBox="0 0 24 24"
    fill="none">
    <path
      d="M18.0103 3.86841C18.596 3.2827 19.5455 3.28283 20.1313 3.86841C20.7171 4.4542 20.7171 5.40372 20.1313 5.9895L14.1206 11.9993L20.1313 18.01C20.7171 18.5958 20.7171 19.5453 20.1313 20.1311C19.5456 20.7169 18.596 20.7169 18.0103 20.1311L11.9995 14.1204L5.98975 20.1311C5.40396 20.7169 4.45444 20.7169 3.86865 20.1311C3.28303 19.5453 3.28292 18.5957 3.86865 18.01L9.87842 11.9993L3.86865 5.9895C3.28297 5.40371 3.2829 4.45416 3.86865 3.86841C4.4544 3.28266 5.40395 3.28272 5.98975 3.86841L11.9995 9.87817L18.0103 3.86841Z"
      :fill="closeColor" />
  </svg>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  const props = defineProps({
    size: { type: Number, default: 24 },
  });
  const emit = defineEmits(['close']);
  const closeColor = ref<string>('#CBCBCB');

  const closeBtn = () => {
    emit('close');
  };
  const handleMouseEnter = () => {
    closeColor.value = '#EDEDED';
  };
  const handleMouseLeave = () => {
    closeColor.value = '#CBCBCB';
  };
</script>

<style scoped></style>
